<template>
  <div class="guide-suggest wrapper">
    <div class="suggest">为您推荐</div>
    <div class="row">
      <a :title="item.title" class="link" href="" v-for="(item, i) in templates" :key="item.id">
        <div class="order">
          <span class="number">{{ i + 1 }}</span>
          {{ item.title }}</div>
        <span class="issue">{{ item.ext }}</span>
      </a>
      <!-- <a class="link" href="">
        <div class="order">
          <span class="number">1</span>
          身体健康状况调查</div>
        <span class="issue">20个问题/3页</span>
      </a>

      <a class="link" href="">
        <div class="order">
          <span class="number">2</span>
          学生身体健康状况调查
        </div>
        <span class="issue">26个问题/3页</span>
      </a>

      <a class="link" href="">
        <div class="order">
          <span class="number">3</span>
          教师身体健康状况调查
        </div>
        <span class="issue">24个问题/3页</span>
      </a>

      <a class="link" href="">
        <div class="order">
          <span class="number">4</span>
          中小学师生健康调查表
        </div>
        <span class="issue">22个问题/2页</span>
      </a>

      <a class="link" href="">
        <div class="order">
          <span class="number">5</span>
          xx市中小学师生健康调查表
        </div>
        <span class="issue">5个问题/1页</span>
      </a>

      <a class="link" href="">
        <div class="order">
          <span class="number">6</span>
          社交网站满意度问卷模板
        </div>
        <span class="issue">34个问题/4页</span>
      </a>

      <a class="link" href="">
        <div class="order">
          <span class="number">7</span>
          购物网用户满意度调查
        </div>
        <span class="issue">21个问题/1页</span>
      </a>

      <a class="link" href="">
        <div class="order">
          <span class="number">8</span>
          数码家电类产品满意度模板
        </div>
        <span class="issue">32个问题/4页</span>
      </a>

      <a class="link" href="">
        <div class="order">
          <span class="number">9</span>
          网购消费者的行为习惯调查
        </div>
        <span class="issue">28个问题/4页</span>
      </a>

      <a class="link" href="">
        <div class="order">
          <span class="number">10</span>
          餐饮类团购用户满意度问卷模板
        </div>
        <span class="issue">31个问题/3页</span>
      </a> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      templates: [
        {
          id: 1,
          title: '身体健康状况调查',
          ext: '20个问题/3页',
        },
        {
          id: 2,
          title: '学生身体健康状况调查',
          ext: '26个问题/3页',
        },
        {
          id: 3,
          title: '教师身体健康状况调查',
          ext: '24个问题/3页',
        },
        {
          id: 4,
          title: '中小学师生健康调查表',
          ext: '22个问题/2页',
        },
        {
          id: 5,
          title: 'xx市中小学师生健康调查表',
          ext: '5个问题/1页',
        },
        {
          id: 6,
          title: '社交网站满意度问卷模板',
          ext: '34个问题/4页',
        },
        {
          id: 7,
          title: '购物网用户满意度调查',
          ext: '21个问题/1页',
        },
        {
          id: 8,
          title: '数码家电类产品满意度模板',
          ext: '32个问题/4页',
        },
        {
          id: 9,
          title: '网购消费者的行为习惯调查',
          ext: '28个问题/4页',
        },
        {
          id: 10,
          title: '餐饮类团购用户满意度问卷模板',
          ext: '31个问题/3页',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.guide-suggest {
  box-sizing: border-box;
}

.link:nth-child( -n + 3 ) .number {
  color:#3da6ff;
}

.suggest{
  font-size: 20px;
  padding-top: 40px;
  padding-bottom: 13px;
  line-height: 1;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
}

.row{
  column-count: 2;
  column-gap: 10%;
}

.link:hover {
  color: #6eace8;
}

.link{
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  color: black;
  line-height: 35px;
  height: 35px;
  // margin-top: 10px;
}

.issue{
  font-size: 14px;
  color: #999999;
}

.number{
  margin-right: 5px;
  font-style: italic;
  font-size: 14px;
}
</style>
